<template>
  <div class="audioArea" :class="{'noAnimation':!ifPlay}" @click="setMusic()">
    <img src="../../static/relay/audio.png" alt="">
<!--    <audio ref="bgMusic" class="area" :src="relayData.settings.bgmusic" :loop="true"></audio>-->
  </div>
</template>

<script>
import {mapState} from "vuex";
import wxModule from "jweixin-module";
import {isWeiXin} from '@/until/QFH5.js'

export default {
  name: "audioSet",
  computed:{
  },
  data(){
    return{
      ifPlay:false,
      innerAudioContext:{},
      firstStart:0,
    }
  },
  props:{
    relayData:{
      type:Object,
      default: {}
    }
  },
  methods:{
    ScanAudio(){
      this.innerAudioContext = uni.createInnerAudioContext();
      this.innerAudioContext.autoplay = true;
      this.innerAudioContext.src = this.relayData.settings.bgmusic

      this.innerAudioContext.loop = true
      this.innerAudioContext.play()
      this.innerAudioContext.onPlay(() => {
        this.ifPlay = true
      });
      this.innerAudioContext.onPause(() => {
        this.ifPlay = false
      });
      // #ifdef H5
      // 公众号开发，注入微信权限，或调用分享接口(此处内容请自行封装)
      // 以下两种方式都可以播放。
      const wxModule = require('jweixin-module')
      let _this = this
      wxModule.ready(function() {
        console.info("!!!!!!!!!!!!!!!!!!!")
        _this.innerAudioContext.play()
      });
      /*wxModule.updateAppMessageShareData({
        success: ()=>{
          _this.innerAudioContext.play()
        }
      })*/
      // #endif
      /*music.onEnded(() => {

        //播放结束

        music = null;

      })*/
      this.addEvent();
    },
    setMusic(){
      if(this.ifPlay){
        this.innerAudioContext.pause()
      }else{
        this.innerAudioContext.play()
      }
    },
    play(){
      this.innerAudioContext.play()
      document.addEventListener("WeixinJSBridgeReady", function () {
        this.innerAudioContext.play()
      }, false);
      /*document.addEventListener("touchstart",this.innerAudioContext.play(), false);*/
    },
    playMusic(){
      if(!this.ifPlay && this.firstStart== 0){
        this.firstStart = this.firstStart+1
        this.innerAudioContext.play()
      }else{
        return;
      }
    },
    addEvent(){
      this.innerAudioContext = uni.createInnerAudioContext();
      this.innerAudioContext.autoplay = true;
      this.innerAudioContext.src = this.relayData.settings.bgmusic
      this.innerAudioContext.loop = true
      this.innerAudioContext.onPlay(() => {
        this.ifPlay = true
      });
      this.innerAudioContext.onPause(() => {
        this.ifPlay = false
      });
      this.play()
    }
  },
  mounted() {
    // this.addEvent()
    /*console.info(this.$refs.bgMusic)
    console.info("")*/
    /*this.$refs.bgMusic.playing = true*/
  }
}
</script>

<style scoped lang="scss">
.audioArea {
  position: fixed;
  width: 80rpx;
  height: 80rpx;
  right: 30rpx;
  top: 30rpx;
  animation: spin 1s infinite linear;
  z-index: 98;
  display: flex;
  align-items: center;
  justify-content: center;
  /*transform-origin: 50% 50%;*/
  img {
    width: 100%;
    height: 100%;
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
.noAnimation{
  animation:none;
}
</style>
